import React from "react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/custom/button";
import { Input } from "@/components/ui/input";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
// import {
//   Dialog,
//   DialogContent,
//   DialogDescription,
//   DialogHeader,
//   DialogTitle,
// } from "@/components/ui/dialog";
// import { useForm } from "react-hook-form";
// import {
//   Form,
//   FormControl,
//   FormField,
//   FormItem,
//   FormLabel,
//   FormMessage,
// } from "@/components/ui/form";
import { useDispatch, useSelector } from "react-redux";
import { RootStateI } from "@/types/system";
import { Link, useNavigate } from "react-router-dom";
import { setUserAction } from "@/store/actions";
import { initialUser } from "@/store/reducers/system";
// import * as z from "zod";
// import { zodResolver } from "@hookform/resolvers/zod";
// import { updateProfile } from "@/api";

export function UserNav() {
  const user = useSelector((state: RootStateI) => state.user);
  const [resetPasswordDialog, setResetPasswordDialog] =
    React.useState<boolean>(false);
  const navigate = useNavigate();
  const dispatch = useDispatch();

  // const formSchema = z.object({
  //   id: z.string().optional(),
  //   name: z.string().trim().min(3, { message: "中心名称至少3个字符" }),
  //   description: z.string().trim().min(3, { message: "描述信息至少3个字符" }),
  // });

  // type FormValuesT = z.infer<typeof formSchema>;
  // const defaultValues = {
  //   id: undefined,
  //   name: "",
  // };

  // // 表单部分
  // const form = useForm<FormValuesT>({
  //   resolver: zodResolver(formSchema),
  //   defaultValues: defaultValues,
  // });

  React.useEffect(() => {
    // document.querySelectorAll(".watermark").forEach((watermark) => {
    //   watermark.remove();
    //   // document.body.removeChild(watermark);
    // });

    const createWatermark = (text: string, x: number, y: number) => {
      const watermarkDiv = document.createElement("div");
      watermarkDiv.textContent = text;
      watermarkDiv.style.position = "fixed";
      watermarkDiv.style.zIndex = "1000";
      watermarkDiv.style.top = `${y}px`;
      watermarkDiv.style.left = `${x}px`;
      watermarkDiv.style.pointerEvents = "none";
      watermarkDiv.style.display = "flex";
      watermarkDiv.style.justifyContent = "center";
      watermarkDiv.style.alignItems = "center";
      watermarkDiv.style.color = "rgba(0, 0, 0, 0.1)";
      watermarkDiv.style.fontSize = "44px";
      watermarkDiv.style.transform = "rotate(-45deg)";
      return watermarkDiv;
    };

    const addWatermarks = (content: string, cols: number, rows: number) => {
      const bodyRect = document.body.getBoundingClientRect();
      const watermarkWidth = bodyRect.width / cols; // 水印宽度
      const watermarkHeight = bodyRect.height / rows + 150; // 水印高度

      for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
          const watermark = createWatermark(
            content,
            watermarkWidth * j,
            watermarkHeight * i
          );
          document.body.appendChild(watermark);
        }
      }
    };

    // 初始添加水印
    const cols = 4;
    const rows = 6;
    addWatermarks(user.username, cols, rows);

    // 动态调整水印位置
    const adjustWatermarks = () => {
      const watermarks = document.querySelectorAll(".watermark");
      const bodyRect = document.body.getBoundingClientRect();
      const watermarkWidth = bodyRect.width / cols; // 水印宽度
      const watermarkHeight = bodyRect.height / rows; // 水印高度

      watermarks.forEach((watermark: any, index) => {
        const row = Math.floor(index / cols);
        const col = index % rows;
        watermark.style.left = `${watermarkWidth * col}px`;
        watermark.style.top = `${watermarkHeight * row}px`;
      });
    };

    // 监听窗口大小变化
    window.addEventListener("resize", adjustWatermarks);

    return () => {
      // 清理函数
      window.removeEventListener("resize", adjustWatermarks);
      document.querySelectorAll(".watermark").forEach((watermark) => {
        document.body.removeChild(watermark);
      });
    };
  }, []);

  return (
    <div>
      {user.accessToken ? (
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button variant="ghost" className="relative h-8 w-18">
              {/* <Avatar className="h-8 w-8">
              <AvatarImage src="/avatars/01.png" alt="User" />
              <span>{user.username}</span>
            </Avatar> */}
              <span>{user.username}</span>
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent className="w-56" align="end" forceMount>
            {/* <DropdownMenuLabel className="font-normal">
              <div className="flex flex-col space-y-1">
                <p className="text-sm font-medium leading-none">
                  {user.username}
                </p>
              </div>
            </DropdownMenuLabel>
            <DropdownMenuSeparator /> */}
            <DropdownMenuGroup>
              <DropdownMenuItem
                onClick={() => {
                  navigate("/user/profile");
                }}
              >
                个人信息
                {/* <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut> */}
              </DropdownMenuItem>
            </DropdownMenuGroup>
            <DropdownMenuSeparator />
            <DropdownMenuItem
              onClick={() => {
                dispatch(setUserAction(initialUser));
              }}
            >
              退出系统
              {/* <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut> */}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      ) : (
        <Link to="/login">登录</Link>
      )}
    </div>
  );
}
